<template>
	<view class="mine_page">
		<view class="mine_header">
			<view class="user_info">
				<image class="user_img" src="https://img.fy6b.com/2023/03/02/858c2d15b94f3.png"></image>
				<view class="user_name">点我授权</view>
			</view>
		</view>
		<view class="mine_content">
			<navigator class="mine_cell" url="/pages/adderss/adderss">
				<view class="cell_label">
					<u-icon name="https://img.fy6b.com/2023/03/02/51476a2a286b9.png" color="#333" size="20"></u-icon>
					<view class="name">地址管理</view>
				</view>
				<u-icon name="arrow-right" color="#333" size="16"></u-icon>
			</navigator>
			<view class="mine_cell" @click="connectUs=true">
				<view class="cell_label">
					<u-icon name="https://img.fy6b.com/2023/03/02/7134958f55e9f.png" color="#333" size="20"></u-icon>
					<view class="name">联系客服</view>
				</view>
				<u-icon name="arrow-right" color="#333" size="16"></u-icon>
			</view>
			<navigator class="mine_cell" url="/pages/mine/aboutUs">
				<view class="cell_label">
					<u-icon name="https://img.fy6b.com/2023/03/02/d68aea2c2d4c1.png" color="#333" size="20"></u-icon>
					<view class="name">关于我们</view>
				</view>
				<u-icon name="arrow-right" color="#333" size="16"></u-icon>
			</navigator>
		</view>

		<view class="bottom_remore_box">
			<u-popup
			  :show="connectUs"
			  round="24rpx"
			  mode="bottom"
			  @close="close"
			>
			  <view class="popup_connect_box">
				<view
				  class="phone_text justify-center font-30 zhu-color"
				  >{{mobilePhoneNum}}</view
				>
				<view
				  class="phone_title_box justify-center flex-column"
				  @click="handleCall"
				>
				  <view class="font-30 zhu-color">呼叫</view>
				  <view class="font-30 next-color phone_title_box_phone">
				</view>
				</view>
				<view class="popup_connect_box_line"></view>
				<view
				  class="cancelBtn justify-center font-30 zhu-color font-500"
				  @click="connectUs = false"
				  >取消</view
				>
			  </view>
			</u-popup>
		  </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			connectUs:false,
			mobilePhoneNum:"110"
		};
	},
	methods: {
		// 打电话
		handleCall(val) {
			uni.makePhoneCall({
				phoneNumber: '110',
				success() { },
				fail() { },
			});
		},
		close(){
			this.connectUs = false
		}
	}
}
</script>

<style lang="scss" scoped>
.mine_page {
	min-height: 100vh;
	background-color: #F6F6F6;

	.mine_header {
		height: 420rpx;
		background: url('https://img.fy6b.com/2023/03/02/f6e6c2cc479b0.png') no-repeat;
		background-size: cover;
		padding-top: 224rpx;
		padding-left: 40rpx;
	}

	.user_info {
		display: flex;
		align-items: center;

		.user_img {
			width: 120rpx;
			height: 120rpx;

		}

		.user_name {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			margin-left: 30rpx;
		}
	}

	.mine_content {
		background-color: #fff;
	}

	.mine_cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 55rpx 0;
		margin: 0 40rpx;
		border-bottom: 1px solid #EEEEEE;

		.cell_label {
			display: flex;
			align-items: center;
			font-size: 30rpx;

			font-family: PingFang SC;
			font-weight: 400;
			color: #222222;
		}

		.name {
			margin-left: 30rpx;
		}
	}
	.bottom_remore_box {
		.popup_connect_box {
		  width: 750rpx;
		  .phone_text {
			height: 140rpx;
			border-bottom: 1rpx solid #f1f1f1;
		  }
		  .phone_title_box {
			padding: 30rpx 0 40rpx;
			.phone_title_box_phone {
			  margin-top: 18rpx;
			}
		  }
		  .popup_connect_box_line {
			width: 100%;
			height: 20rpx;
			background: #f8f8f8;
		  }
		  .cancelBtn {
			height: 140rpx;
		  }
		}
	  }
}
</style>
